<template>
	<view class="notifications-container">
		<!-- 头部导航栏 -->
		<view class="navbar">
			<view class="nav-left" @tap="goBack">
				<image class="back-icon" src="/static/icons/arrow_left.png"></image>
			</view>
			<text class="page-title">消息通知</text>
			<view class="nav-right" @tap="markAllAsRead">
				<text class="read-all">全部已读</text>
			</view>
		</view>
		
		<!-- 消息类型切换 -->
		<view class="tab-bar">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{ active: currentTab === index }"
				@tap="switchTab(index)"
			>
				<text class="tab-text">{{ tab }}</text>
				<view class="tab-line" v-if="currentTab === index"></view>
			</view>
		</view>
		
		<!-- 通知列表 -->
		<scroll-view class="notification-list" scroll-y>
			<view class="notification-item" v-for="(item, index) in filteredNotifications" :key="index" @tap="viewNotification(item)">
				<view class="notification-dot" v-if="!item.read"></view>
				<view class="notification-icon" :class="item.type">
					<image class="icon" :src="getIconByType(item.type)"></image>
				</view>
				<view class="notification-content">
					<text class="notification-title">{{ item.title }}</text>
					<text class="notification-desc">{{ item.content }}</text>
					<text class="notification-time">{{ item.time }}</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 无消息提示 -->
		<view class="empty-state" v-if="filteredNotifications.length === 0">
			<image class="empty-icon" src="/static/images/empty-notification.png"></image>
			<text class="empty-text">暂无消息通知</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

const tabs = ['全部', '系统', '项目', '投标'];
const currentTab = ref(0);

const notifications = ref([
	{
		id: 1,
		type: 'system',
		title: '系统通知',
		content: '您的账号已成功升级为高级会员，可享受更多特权服务。',
		time: '2025-04-14 10:30',
		read: false
	},
	{
		id: 2,
		type: 'project',
		title: '项目动态',
		content: '您关注的"智能制造设备采购项目"已更新，点击查看详情。',
		time: '2025-04-13 16:45',
		read: false
	},
	{
		id: 3,
		type: 'bid',
		title: '投标提醒',
		content: '您的投标"工业用高精度机器人设备采购"已被查看，请及时关注。',
		time: '2025-04-12 09:15',
		read: true
	},
	{
		id: 4,
		type: 'system',
		title: '系统通知',
		content: '平台将于2025年4月15日凌晨2:00-4:00进行系统维护，请提前做好准备。',
		time: '2025-04-11 18:30',
		read: true
	}
]);

const filteredNotifications = computed(() => {
	if (currentTab.value === 0) {
		return notifications.value;
	} else {
		const typeMap = {
			1: 'system',
			2: 'project',
			3: 'bid'
		};
		return notifications.value.filter(item => item.type === typeMap[currentTab.value]);
	}
});

const switchTab = (index) => {
	currentTab.value = index;
};

const getIconByType = (type) => {
	const iconMap = {
		'system': '/static/icons/notification-system.png',
		'project': '/static/icons/notification-project.png',
		'bid': '/static/icons/notification-bid.png'
	};
	return iconMap[type] || iconMap.system;
};

const viewNotification = (item) => {
	// 标记为已读
	const index = notifications.value.findIndex(n => n.id === item.id);
	if (index !== -1) {
		notifications.value[index].read = true;
	}
	
	// 根据类型跳转到相应页面
	if (item.type === 'project') {
		uni.navigateTo({
			url: '/pages/project/project-detail?id=101'
		});
	} else if (item.type === 'bid') {
		uni.navigateTo({
			url: '/pages/bid/bid-detail?id=101'
		});
	} else {
		uni.showToast({
			title: '查看通知: ' + item.title,
			icon: 'none'
		});
	}
};

const markAllAsRead = () => {
	notifications.value.forEach(item => {
		item.read = true;
	});
	
	uni.showToast({
		title: '已全部标为已读',
		icon: 'success'
	});
};

const goBack = () => {
	uni.navigateBack();
};
</script>

<style>
.notifications-container {
	min-height: 100vh;
	background-color: #f5f7fa;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	height: 100rpx;
	background-color: #fff;
}

.nav-left {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	width: 40rpx;
	height: 40rpx;
}

.page-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.nav-right {
	height: 60rpx;
	display: flex;
	align-items: center;
}

.read-all {
	font-size: 28rpx;
	color: #1d4ed8;
}

.tab-bar {
	display: flex;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.tab-item {
	flex: 1;
	height: 88rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

.tab-text {
	font-size: 28rpx;
	color: #666;
}

.tab-item.active .tab-text {
	color: #1d4ed8;
	font-weight: 500;
}

.tab-line {
	position: absolute;
	bottom: 0;
	width: 40rpx;
	height: 4rpx;
	background-color: #1d4ed8;
	border-radius: 2rpx;
}

.notification-list {
	padding: 20rpx 0;
}

.notification-item {
	position: relative;
	display: flex;
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 2rpx;
}

.notification-dot {
	position: absolute;
	top: 30rpx;
	right: 30rpx;
	width: 16rpx;
	height: 16rpx;
	background-color: #ef4444;
	border-radius: 50%;
}

.notification-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.notification-icon.system {
	background-color: rgba(59, 130, 246, 0.1);
}

.notification-icon.project {
	background-color: rgba(16, 185, 129, 0.1);
}

.notification-icon.bid {
	background-color: rgba(245, 158, 11, 0.1);
}

.icon {
	width: 40rpx;
	height: 40rpx;
}

.notification-content {
	flex: 1;
}

.notification-title {
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 10rpx;
}

.notification-desc {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 10rpx;
	line-height: 1.5;
}

.notification-time {
	font-size: 24rpx;
	color: #999;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 30rpx;
	color: #999;
}
</style> 